<!-- 页面 -->
<template>
    <div class="fen">
        <tou :toto="toto"></tou>
        <van-sidebar class="aa" v-model="activeKey">
            <van-sidebar-item v-for="(item, index) in list" :key="index" @click="add(item.children)" :title=item.cat_name />
        </van-sidebar>
        <div class="dd">
            <van-row v-for="(item, index) in list1" :key="index">
                <van-col span="24">
                    <p style="height: 3.125rem; text-align: center;">{{ item.cat_name }}</p>
                </van-col>
                <van-row> 
                    <van-col @click="fenye(item1)" v-for="(item1,index1) in item.children" :key="index1" span="8"><img class="fim" :src="item1.cat_icon" alt="">{{ item1.cat_name }}</van-col>
                </van-row>
            </van-row>
        </div>
        <div style="width: 6.25rem;"></div>
        <di :active="active"></di>
    </div>
</template>
<!-- vue -->
<script>
import tou from '@/components/tou.vue';
import di from '@/components/di.vue';
export default {
    components: {
        tou,
        di
    },
    data() {
        return {
            // 声明的属性
            active: 1,
            toto: '分类',
            list: [],
            activeKey: 0,
            list1: [],
        }
    },
    //生命周期函数
    mounted() {
        this.$axios.get('https://api-hmugo-web.itheima.net/api/public/v1/categories',).then(res => {
            res.data.message.forEach((item, index) => {
                if (index == 0) {
                    this.list1 = item.children
                }
                this.list.push(item)
            })
        })
    },
    // 调用方法
    methods: {
        add(listd) {
            this.list1 = listd
            console.log(this.list1);
        },
        fenye(item1){
            localStorage.setItem('id11',JSON.stringify(item1.cat_id))
            this.$router.push('/xiang')
        }
    },
    // 监听器
    watch: {
    },
    // 计算属性
    computed: {
    },
    // 过滤器
    filters: {
    },
    // 自定义指令
    directives: {
    }
}
</script>
<!-- css样式 -->
<style>
.fen .dd {
    width: 70%;
    /* background: blue; */
    float: right;
}

.fen .aa {
    width: 30%;
    float: left;
}
.fen .fim{
    width: 100%;
}
</style>